<!--
 * @Author: wusd
 * @Date: 2022-06-15 09:39:58
 * @LastEditors: wusd
 * @LastEditTime: 2022-06-17 10:15:00
 * @Description: 
 * 
-->
<template>
  <div class="manage_main">
    <el-container class="root-container">
      <baseHeader></baseHeader>
      <el-container class="el-container">
        <el-aside width="auto" class="aside">
          <el-scrollbar class="custom-scrollbar">
            <el-menu router class="base_menue" :default-active="$route.path">
              <baseMenue :menue="$store.state.tab.menue"></baseMenue>
            </el-menu>
          </el-scrollbar>
        </el-aside>
        <el-main class="page-router">
          <baseTab class="tab"></baseTab>
          <router-view class="page-container" :key="$route.query.key" />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import baseHeader from '@/components/baseHeader.vue'
import baseMenue from '@/components/baseMenue'
import baseTab from '@/components/baseTab'
import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState({
      user: state => state.user.userInfo
    })
  },
  methods: {},
  components: {
    baseHeader,
    baseMenue,
    baseTab
  }
}
</script>

<style lang="scss">
.manage_main {
  height: 100%;
  .base_menue {
    width: 240px;
    min-height: 100%;
    .el-menu-item {
      height: 40px;
      line-height: 40px;
    }
  }
  .root-container,
  .main {
    display: flex;
    flex-flow: column nowrap;
    height: 100%;
    .el-header {
      flex: none;
      height: auto !important;
      background-color: #4285f4;
    }
    .el-container {
      flex: auto;
      height: 0;
      .aside {
        background-color: #fff;
      }
      .custom-scrollbar {
        height: 100%;
        .el-scrollbar__wrap {
          overflow-x: hidden;
          overflow-y: auto;
        }
      }
      .page-router {
        display: flex;
        flex-flow: column nowrap;
        padding: 0;
        .tab {
          flex: none;
        }
        .page-container {
          flex-grow: 1;
          overflow: auto;
          background-color: #fff;
          height: 0;
        }
      }
    }
  }
  .el-scrollbar__view {
    height: 100%;
  }
}
</style>
